<template>
    <div class="fcb pos-re">
        <input class="hb-input "
            :class="iptType"
            type="number"
            @focus="e_focu"
            @blur="e_blur"
            @input="e_input"
            v-model="inputed">
        <hb-button class="button"
            clr="s1"
            :txt="buttontxt"
            @clk="e_send" />
        <div class="msg pos-ab bb"
            :class="{die: !canShowMsg}"
            v-text="msgs[formType][lang]" />
    </div>
</template>

<script>
import {rules, msgs} from './rule'
export default {
	name: 'hb-input',
	props: {
		formType: {
			default: 'user',
		},
		back: {
			required: true,
		},
		iclear: {
			default: 0,
		},
	},
	data() {
		return {
			iptType: 'will',
			msgs,
			canShowMsg: false,
			inputed: '',
			buttonTimer: null,
			buttonTimeNumber: -1,
			allTime: 120, // 倒计时总时间
			sendTxtSave: {
				cn: '发送验证码',
				en: 'Click to send',
			},
		}
	},
	computed: {
		lang() {
			return this.$store.state.setting.lang
		},
		buttontxt() {
			if (this.buttonTimer === null) {
				return this.sendTxtSave[this.lang]
			} else {
				return this.buttonTimeNumber
			}
		},
	},
	created() {},
	watch: {
		iclear() {
			this.buttonTimeNumber = 119
		},
	},
	methods: {
		e_focu() {
			this.iptType = 'focu'
			this.canShowMsg = false
		},
		e_blur() {
			this.check()
			this.showMsg()
		},
		e_input() {
			this.check()
		},
		check() {
			let re = false
			let s = this.inputed
			re = rules[this.formType](s)
			this.iptType = re ? '' : 'err'
			this.$emit('ipt', re, this.inputed, this.back)
		},
		showMsg() {
			if (this.iptType === 'err') {
				this.canShowMsg = true
			}
		},
		e_send() {
			if (this.buttonTimer !== null) {
				return
			}
			this.buttonTimeNumber = this.allTime
			this.buttonTimer = setInterval(() => {
				this.buttonTimeNumber--
				if (this.buttonTimeNumber === 0) {
					clearInterval(this.buttonTimer)
					this.buttonTimer = null
				}
			}, 1000)
			this.$emit('clk')
		},
	},
}
</script>

<style scoped>
.hb-input {
	outline-width: 0;
	width: 60%;
	height: 48px;
	border-radius: 4px;
	border-color: #4e5b85;
	padding-left: 20px;
	color: #c7cce6;
	background-color: #1e2235;
	font-size: 16px;
}
/*去除input number框的上下选择按钮*/
.hb-input::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
}
.hb-input:focus {
	border-color: rgb(122, 152, 247);
}
.err {
	border-color: rgb(174, 78, 84);
}
.button {
	margin-left: 20px;
	flex-grow: 1;
	height: 48px;
	border: 1px solid #4e5b85;
}

.msg {
	top: -3px;
	left: 30%;
	transform: translate(-50%, -100%);
	box-shadow: 0 3px 5px #1f1f2e;
	border-radius: 4px;
	padding: 5px 15px;
	background-color: #262a42;
	font-size: 14px;
	color: #7a98f7;
}
.msg::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 12px;
	height: 12px;
	background-color: #262a42;
	transform: translate(-50%, 50%) rotate(45deg);
}
</style>